<template>
	<div class="container">
		<v-toolBar :fullPath='postData.opera' :tableColumns='tableColumns' @changeLie='getChangeLie'
			@getSearchIPArr='getToolBarSearchIPArr' @getSearchIP='getToolBarSearchIP'>
		</v-toolBar>
		<el-table v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
			:data="tableData" border style="width: 100%" stripe>
			<el-table-column type="index" width="50" label="序号">
			</el-table-column>
			<template v-for="(item) in tableColumns">
				<el-table-column :prop="item.prop" :label="item.label" :width="item.width" align="center"
					:sortable="item.sortable" v-if="item.isShow" :key="item.prop">
					<template v-slot="scope">
						<template v-if="item.format == 'progress'">
							<!-- {{scope.row[item.prop]}} -->
							<!-- scope.row[item.prop]==0?0: -->
							<!-- :percentage="Number(calcCheng(scope.row[item.prop], 100).toFixed(1))"  -->
							<el-progress
								:percentage="scope.row[item.prop]==null?0:Number(calcCheng(scope.row[item.prop], 100).toFixed(1))"
								:color="TalallColorMethod">
							</el-progress> 
						</template>
						<template v-else-if="item.format == 'GB'">
							<div>
								{{ scope.row[item.prop] ? scope.row[item.prop] + '&nbsp;GB' : scope.row[item.prop] }}
							</div>
						</template>
						<template v-else>
							<div>
								{{ scope.row[item.prop] }}
							</div>
						</template>
					</template>
				</el-table-column>
			</template>
			<el-table-column type="index" width="120" label="增长量图表" align="center">
				<template slot-scope="scope">
					<!-- {{scope.row.TABLESPACE_NAME}} -->
					<el-button type="primary" icon="el-icon-data-analysis" size="mini"
						@click="saveID(scope.row.MONID,scope.row.TABLESPACE_NAME)">查看
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<v-pagination :dataTotal="dataTotal" :curPage="postData.curPage" :pageSize="postData.pageSize"
			@getCurPage="getPaginationCurPage" @getPageSize="getPaginationPageSize">
		</v-pagination>
		<el-dialog :title="spaceName" :visible.sync="dialogVisible" width="60%">
			<div class="selectBox">
				<div>请选择年份：</div>
				<el-select v-model="chooseYear" filterable placeholder="请选择年份" clearable @change="showChart()">
					<el-option v-for="item in YearList" :key="item" :label="item" :value="item">
					</el-option>
				</el-select>
			</div>
			<div class="echartsBox" ref="mychart">

			</div>
			<!-- <span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			</span> -->
		</el-dialog>
	</div>
</template>

<script>
	import {
		fetchData,
		postJavaServerData
	} from '@/api/index.js'
	import vPagination from '../../../../common/Pagination.vue';
	import vToolBar from '../../toolbar/Toolbar.vue';
	import tableColumns from './DbTableSpaceTableColumns.js';
	import bus from 'common/bus.js';

	export default {
		name: 'dbTableSpace',
		components: {
			vPagination,
			vToolBar
		},
		data() {
			return {
				postData: {
					opera: 'dbTableSpace',
					curPage: 1,
					pageSize: 20,
					sort: {
						sortColumn: '',
						sortOrders: ''
					},
					filtersType: 'fuzzyquery',
					filters: {}
				},
				tableData: [],
				YearList: [],
				spaceList: [],
				chooseID: '',
				chooseName: '',
				spaceName: '',
				inputTime: '',
				yaxisList: [],
				aa: '',
				chooseYear: '',
				dialogVisible: false,
				dataTotal: 0,
				tableColumns: tableColumns,
				SearchIPArr: [],
				searchJson: {},
				SearchIP: '',
				timerName: 'MonitorInfoDataBaseOracleTableSpace',
				timerEventName: 'timerMonitorInfoDataBaseOracleTableSpace',
				// timerInterval: 1000 * 60,
				loading: true,
				selectedMonID: ''
			}
		},
		created() {
			this.selectedMonID = this.$store.getters["ItemMonitorOracle/getItem"];
			this.postData.filters.MONID = this.selectedMonID.MONID;
			this.getTableData()


			bus.$emit('timerNewTodo', {
				name: this.timerName,
				eventName: this.timerEventName,
				interval: this.timerInterval,
				intervalNow: 0
			});

			bus.$on(this.timerEventName, msg => {
				if (msg.isGetData) {
					this.getTableData();
				}
			});
		},
		mounted() {
			this.getYear()
			bus.$on("ItemMonitorOracle", msg => {
				this.resetData();
				this.selectedMonID = msg;
				this.postData.filters.MONID = this.selectedMonID.MONID;

				this.getTableData()


			})
		},
		computed: {
			postDataFn() {
				return {
					postData: JSON.stringify(this.postData)
				}
			},
			timerInterval() {
				return Number(this.$store.state.pageRefresh) * 1000
			}
		},
		//计算函数未导入
		methods: {
			TalallColorMethod(percentage) {
				if (percentage <= 50) {
					return '#67c23a';
				} else if (percentage <= 75) {
					return '#e6a23c';
				} else {
					return '#f56c6c';
				}
			},
			getYear() {
				let date = new Date();
				let year = date.getFullYear();
				let lastyear = date.getFullYear() - 1;
				let oldyear = date.getFullYear() - 2;
				let arr = []
				arr.push(year)
				arr.push(lastyear)
				arr.push(oldyear)
				console.log(arr)
				this.YearList = arr
				this.chooseYear = this.YearList[0]
			},
			async getTableData() {
				this.loading = true;

				await fetchData({
					postData: JSON.stringify(this.postData)
				}).then((res) => {
					console.log(123, res)
					this.dataTotal = res.dataTotal;
					this.tableData = res.data.sort((a, b) => {
						return b.USED_PER - a.USED_PER
					});
					this.loading = false;
				});
			},
			saveID(id, name) {
				this.chooseID = id
				this.chooseName = name
				this.spaceName = '表空间:' + name
				this.showChart()
			},
			async showChart() {

				if (this.$refs.mychart != undefined) {
					let myChart = this.$echarts.init(this.$refs.mychart);
					myChart.dispose();
					console.log(this.$refs.mychart)
				}
				this.yaxisList = []
				let res = await postJavaServerData("/Sp/oracletable?cid=" + this.chooseID + '&tablename=' + this
					.chooseName + '&year=' + this
					.chooseYear)
				this.spaceList = Object.values(res)
				console.log('res', this.spaceList)

				this.spaceList.forEach((item, index) => {
					if (item != null) {
						console.log(item.totalMb)
						this.yaxisList.push((item.usedMb/1000).toFixed(3))
					}
				})
				this.dialogVisible = true
				this.$nextTick(() => {
					this.creatChart()
				})
			},
			creatChart() {
				console.log(123,this.spaceList)
				let that = this
				let myChart = this.$echarts.init(this.$refs.mychart);
				const option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985'
							}
						},
						formatter: function(params) {
							console.log('params',params)
							that.spaceList.forEach((item, index) => {
								if (item != null) {
									if (params[0].data == (item.usedMb/1000).toFixed(3)) {
										that.aa = (item.totalMb/1000).toFixed(3)
										that.bb = (item.freeMb/1000).toFixed(3)
									}
								}
							})
							return params[0].axisValue + '</br>' +
								'总空间：' + that.aa + 'GB' + '</br>' +
								'使用量：' + params[0].data + 'GB' + '</br>' +
								'剩余量：' + that.bb + 'GB'
						}
					},
					xAxis: {
						data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
					},
					legend: {
						data: ['表空间']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					yAxis: [{
						type: 'value'
					}],
					series: [{
						name: '表空间',
						type: 'bar',
						data: this.yaxisList,
						barWidth: 30, // 设置柱体宽度
						itemStyle: {
							emphasis: {
								barBorderRadius: 7 // 设置柱体边角的圆角
							}
						},
						label: {
							show: true,
							position: 'top', // 顶部显示
							formatter: '{c}', // 显示数据值
						},
					}]
				};
				// let option = {
				// 	title: {
				// 		text: this.spaceName
				// 	},
				// 	tooltip: {
				// 		trigger: 'axis',
				// 		axisPointer: {
				// 			type: 'cross',
				// 			label: {
				// 				backgroundColor: '#6a7985'
				// 			}
				// 		}
				// 	},
				// 	legend: {
				// 		data: ['总空间']
				// 	},
				// 	grid: {
				// 		left: '3%',
				// 		right: '4%',
				// 		bottom: '3%',
				// 		containLabel: true
				// 	},
				// 	xAxis: [{
				// 		type: 'category',
				// 		boundaryGap: false,
				// 		data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月']
				// 	}],
				// 	yAxis: [{
				// 		type: 'value'
				// 	}],
				// 	series: [{
				// 			name: '总空间',
				// 			type: 'line',
				// 			stack: 'Total',
				// 			areaStyle: {},
				// 			emphasis: {
				// 				focus: 'series'
				// 			},
				// 			data:this.yaxisList
				// 		},
				// 	]
				// };
				myChart.setOption(option);
			},
			getPaginationCurPage(val) {
				this.postData.curPage = val;
				this.getTableData();
			},
			getPaginationPageSize(val) {
				// 分页大小改变之后，重置当前页码为 1
				this.postData.curPage = 1;
				this.postData.pageSize = val;

				this.getTableData();
			},
			getToolBarSearchIPArr(arr) {
				// 获取搜索IP关键字
				this.SearchIPArr = arr;

				this.postData.curPage = 1;
				if (this.SearchIPArr.length > 0) {
					this.postData.filters = {
						ip: this.SearchIPArr
					};
				} else {
					this.postData.filters = {};
				}

				this.getTableData();
			},
			getToolBarSearchIP(str) {
				// 获取搜索IP关键字
				this.SearchIP = str;
				this.postData.curPage = 1;
				this.postData.filters = {
					ip: this.SearchIP
				};
				this.getTableData();
			},
			getChangeLie(val) {
				// 遍历表格列
				this.tableColumns.map((item, index) => {
					// 列的显示隐藏状态改变
					item.isShow = val.includes(item.label);
				});
			},
			resetData() {
				this.dataTotal = 0;
				this.tableData = [];

			}
		},
		watch: {

		},
		beforeDestroy() {
			// 页面关闭前，移除定时器任务
			bus.$emit('timerNewTodo', {
				name: this.timerName
			});
		},
	}
</script>

<style scoped>
	.el-table .warning-row {
		background: oldlace;
	}

	.selectBox {
		width: 300px;
		height: 50px;
		margin-left: 30px;
		display: flex;
		flex-direction: row;
		align-items: center;

	}

	.echartsBox {
		width: 100%;
		height: 400px;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}
</style>
